require('./index.scss');
var template = require('./template.html');

var comp = avalon.component('ms-select', {
    template: template,
    defaults: {
        dropdownData:{
            checked:'',
            checkedText:'',
            list:[{
                val:"11",
                text:"text11",
            },{
                val:"22",
                text:"text22",
            },{
                val:"33",
                text:"text33",
            }],
            changefn:function(){}
        },
        changeClick:function(el){
            var that = this;
            if(el.val!=that.dropdownData.checked){
                that.dropdownData.checked = el.val;
                that.dropdownData.checkedText = el.text;
                that.dropdownData.changefn && that.dropdownData.changefn(el.$model);
                console.log('changeClick',el,that.dropdownData);
            }
        },
        onInit:function(){
            // $watch 不能监听对象，只能监听简单数据类型  https://github.com/RubyLouvre/avalon/issues/1914
            // this.$watch('dropdownData.list',function(newval){
            //     console.log('newval',newval);
            // });
        },
        onReady:function(e){
            var that = this;
            // console.log('e', e.target,comp.$watch);
            var $box = $(e.target),
                $checked = $box.find('.checked'),
                $listBox = $box.find('.dropdown-list');

            $box.on('click',function(){
                $listBox.slideToggle('fast');
            });
        }
    }
});

module.exports = comp;